<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>美图</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" th:href="@{/css/sliderx.css}">
    <script type="text/javascript" th:src="@{/js/sliderx.js}"></script>
    <link rel="stylesheet" th:href="@{/css/style.css}">


</head>
<body>
<!--顶部导航栏-->
<div th:replace="Currency/indexnav::indexnav(4)"></div>

<div>
    <div class="container">
        <div class="row ">
            <div class="col-md-3">
                <span style="font-size: 20px">美图|</span>  记录-瞬间-人世 </div>
        </div>
    </div>
</div>
<hr>
<!-- Photo gallery start -->
<div class="container">
    <div class="main-title text-center">
        <h1 class="mb-30">Properties Gallery</h1>
    </div>
    <div class="row"  id="imgList">
        <!--                <div class="col-lg-4 col-md-6 col-sm-6">-->
        <!--                    <a href="#" class="thumbnail">-->
        <!--                        <img src="..." alt="..." style="width: 171px;height: 180px">-->
        <!--                    </a>-->
        <!--                </div>-->
    </div>
    <div class="row" id="addMore">
        <!--            <div  class = "col-md-offset-6 col-lg-offset-4col-xl-offset-4">-->
        <!--                <button class="addMoreBtn">加载更多</button>-->
        <!--            </div>-->
    </div>
</div>

<!-- Photo gallery end -->
<br>
<hr>
<!--footer-->
<footer th:replace="Currency/indexnav::indexfooter"></footer>
<!--footer-->

<!--State GoToTop-->
<div th:replace="Currency/indexnav::GoToTop"></div>
<!--End GoToTop-->
<script>
    //这里自加载
    $(function () {
        //获取数据
        getPhoto(1);
    })

    function getPhoto(pageNum) {
        $.ajax({
            url:"[(@{/photo})]",
            data:{"pageNum":pageNum},
            type:"post",
            success:function (message) {
                // console.log(1);
                console.log(message);
                build_photo(message);
                // addMore(message);
                build_More(message)

            }
        })
    }




    function build_More(result) {
        if (result.extend.pageInfo.hasNextPage == false){
            //先清空，防止累加
            $("#addMore").empty();
            // $("#addMoreBtn").empty();

            var div1 = $("<div  class = \"col-md-offset-6 col-lg-offset-4col-xl-offset-4\"></div>")
            var btn = $("<p  id=\''>亲，我也是有底线的哦</p>")
            div1.append(btn)
                .appendTo("#addMore")
        }else{
            //先清空，防止累加
            $("#addMore").empty();
            var div1 = $("<div  class = \"col-md-offset-6 col-lg-offset-4col-xl-offset-4\"></div>")
            var btn = $("<button class=\"addMoreBtn  btn-success \" id=\'addMoreBtn'>加载更多</button>")
            div1.append(btn)
                .appendTo("#addMore")
            $("#addMoreBtn").click(function () {
                getPhoto(result.extend.pageInfo.nextPage);
            })
        }
    }

    function build_photo(result){
        // $("#imgList ").empty();

        //获取json的list数据，即图片数据
        var photoList = result.extend.pageInfo.list;

        //jq的遍历
        $.each(photoList,function (index,item) {
            // var aurl = $("<a href=\"#\" class=\"thumbnail\"></a>").attr('href',item.photo)
            var img = $("<img src=\"...\" alt=\"...\" style=\"height:220px\" class='thumbnail img-responsive'>").attr('src',item.photo);
            // var aurlAndImg = aurl.append(img);

            //append方法执行完成以后还是返回原来的元素
            //appendTo追加到teacher_table
            $(" <div class=\"col-lg-4 col-md-6 col-sm-6 img-responsive center-block\"></div>").append(img)
                .appendTo("#imgList");

            // var imgUrl = item.photo;
            // // console.log(imgUrl);
            // $(".img-fluid").attr('src',item.photo) ;
            // console.log($(".img-fluid").src = item.photo);
        })
    }
</script>


</body>
</html>